<template>
  <div class="table-main">
    <div class="tab-search">
      <div class="search-cont">
        <div class="search-name">姓名:</div>
        <el-input v-model="searchFrom.contacts" placeholder="请输入内容"></el-input>
      </div>
      <div class="search-btns">
        <el-button type="primary" size="small" @click="handSearch()">查询</el-button>
        <el-button size="small" @click="reset()">重置</el-button>
      </div>
    </div>
    <el-table
      border
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%"
      @selection-change="handleSelectionChange"
      v-loading="loading"
    >
      <el-table-column type="selection"></el-table-column>
      <el-table-column prop="orderNum" label="订单号"></el-table-column>
      <el-table-column prop="dingjinNum" label="定金单号"></el-table-column>
      <!-- <el-table-column v-for="item in tableData.busSonOrderList" :key="item.id" :prop="item.orderNum" :label="item.orderName"></el-table-column> -->
      <el-table-column prop="weikuanNum" label="尾款单号"></el-table-column>
      <el-table-column prop="quankuanNum" label="全款单号"></el-table-column>
      <el-table-column prop="createTime" label="下单时间"></el-table-column>
      <el-table-column prop="contacts" label="姓名"></el-table-column>
      <el-table-column prop="phone" label="手机号"></el-table-column>
      <el-table-column prop="orderStaName" label="订单状态"></el-table-column>
      <el-table-column prop="moeny" label="全款金额"></el-table-column>
      <el-table-column prop="shopAtive" label="操作" width="200">
        <template slot-scope="scope">
          <div class="shop_btns">
            <el-button type="text" @click="handDetail(scope.row)">详情</el-button>
            <el-button type="text" @click="handEdit(scope.row)" v-if="scope.row.orderStatus==1">审核</el-button>
            <el-popover
              placement="top"
              width="160"
              trigger="click"
              :ref="'popover-' + scope.row.id"
              style="margin-left:10px;"
            >
              <p>确定删除?</p>
              <div style="text-align: right; margin: 0">
                <el-button size="mini" type="text" @click="handPopClos(scope.row)">取消</el-button>
                <el-button type="primary" size="mini" @click="handPopDel(scope.row)">确定</el-button>
              </div>
              <el-button type="text" @click="handDel(scope.row)" slot="reference">删除</el-button>
            </el-popover>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <div class="pags_box">
      <el-pagination
        @size-change="handBidleSizeChange"
        @current-change="handBidleCurrentChange"
        :current-page="pageBid.start"
        :page-sizes="[5,10,15]"
        :page-size="pageBid.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageBid.totalCount"
      ></el-pagination>
    </div>
    <shopDig :isState="isState" ref="shopDig"></shopDig>
  </div>
</template>

<script>
import axios from 'axios'
import { parseTime } from '@/utils'
import shopDig from './shopDig/index'
export default {
  name: 'SidebarLogo',
  components: {
    shopDig
  },
  data() {
    return {
      bntLoading: false,
      rules: {
        roleName: [{ required: true, message: '请选择角色', trigger: 'change' }]
      },
      roleForm: {},
      roleList: [],
      roleDig: false,
      imagePurposeList: ['商品轮播图', '首页弹窗广告'],
      dialogVisible: false,
      searchFrom: {
        contacts: ''
        // shopStatus: ''
      },
      shopStatusOptions: [
        {
          label: '已通过',
          value: '1'
        },
        {
          label: '未审核',
          value: '2'
        },
        {
          label: '已拒绝',
          value: '3'
        }
      ],
      tableData: [],
      multipleSelection: [],
      loading: true,
      pageBid: {
        start: 1,
        limit: 10,
        totalCount: 0,
        tatalpage: 0
      },
      isState: 0,
      form: {},
      ids: '',
      itemObj: {}
    }
  },
  async mounted() {
    this.loading = true
    let res = await this.$api
      .gitOrderList({
        page: this.pageBid.start,
        limit: this.pageBid.limit,
        searchObj: this.searchFrom
      })
      .finally(() => {
        this.loading = false
      })
    this.loading = false
    res.data.data.forEach(item => {
      switch (item.orderStatus) {
        case 1:
          item.orderStaName = '待确定'
          break
        case 2:
          item.orderStaName = '待付款'
          break
        case 3:
          item.orderStaName = '进行中'
          break
        case 4:
          item.orderStaName = '已完成'
          break
        default:
          break
      }
      item.busSonOrderList.forEach(ele => {
        switch (ele.orderType) {
          case 1:
            item.dingjinNum = ele.orderNum
            break
          case 2:
            item.weikuanNum = ele.orderNum
            break
          case 3:
            item.quankuanNum = ele.orderNum
            item.moeny = ele.moeny
            item.isPay = ele.isPay
            break
          default:
            break
        }
      })
    })
    this.tableData = res.data.data
    this.pageBid.totalCount = res.data.count
    console.log(this.tableData, 'this.tableData')
  },
  methods: {
    handSubRole(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          let newForm = {
            uId: this.itemObj.id,
            rId: this.roleForm.roleName
          }
          this.bntLoading = true
          this.$api
            .editBusUserRole(newForm)
            .then(res => {
              this.roleDig = false
              this.$message({
                message: res.data.message,
                type: 'success'
              })
              this.bntLoading = false
            })
            .finally(() => {
              this.bntLoading = false
            })
        } else {
          console.log('error submit!!')
          this.$message({
            message: '请完成表单录入'
          })
          this.bntLoading = false
          return false
        }
      })
    },
    handRole(item) {
      this.roleDig = true
      this.itemObj = item
    },
    formatJson(filterVal) {
      return this.tableData.map(v =>
        filterVal.map(j => {
          if (j === 'createTime') {
            return parseTime(v[j])
          } else {
            return v[j]
          }
        })
      )
    },
    //导出表格
    handDowUp() {
      if (this.tableData.length == 0) {
        this.$message({
          message: '暂无数据'
        })
        return
      }
      this.loading = true
      import('@/vendor/Export2Excel').then(excel => {
        const tHeader = ['来源', '时间', '轮播图名字', 'banner缩略图']
        const filterVal = [
          'imagePurpose',
          'createTime',
          'imageTitle',
          'rewResPath'
        ]
        const data = this.formatJson(filterVal)
        excel.export_json_to_excel({
          header: tHeader,
          data,
          filename: 'table-list'
        })
        this.loading = false
      })
    },
    //清空选中
    handSeleColse() {
      this.$refs.multipleTable.clearSelection()
    },
    closeFrom() {
      this.form = {}
    },
    handleClose() {
      this.roleDig = false
    },
    handAdd() {
      this.isState = 0
      // this.dialogVisible = true
      this.$refs.shopDig.dialogVisible1 = true
    },
    handSearch() {
      this.init(this.searchFrom)
    },
    reset() {
      for (let key in this.searchFrom) {
        this.searchFrom[key] = ''
      }
      this.init()
      this.$message({
        message: '重置成功',
        type: 'success'
      })
    },
    handDetail(row) {
      this.isState = 3
      this.form = row
      this.$refs.shopDig.handGetShop(row.id)
      this.$refs.shopDig.dialogVisible1 = true
    },
    handEdit(row) {
      this.isState = 1
      this.form = row
      this.$refs.shopDig.handGetShop(row.id)
      this.$refs.shopDig.dialogVisible1 = true
    },
    handPopClos(row) {
      this.$refs[`popover-` + row.id].doClose()
    },
    handPopDel(row) {
      this.$api.delBusOrder({ id: row.id }).then(res => {
        console.log(res, '删除')
        if (res.data.code == 200) {
          // this.$message(res.data.message)
          this.$message({
            message: res.data.message,
            type: 'success'
          })
          this.$refs[`popover-` + row.id].doClose()
          if (
            Math.floor(
              (parseInt(this.pageBid.totalCount) - 1) / this.pageBid.limit
            ) ==
              (parseInt(this.pageBid.totalCount) - 1) / this.pageBid.limit &&
            Math.ceil(
              parseInt(this.pageBid.totalCount) / parseInt(this.pageBid.limit)
            ) -
              parseInt(this.pageBid.start) <
              1
          ) {
            this.pageBid.start = this.pageBid.start - 1
          }
          this.init()
        }
      })
    },
    handDel(row) {
      // row.visible2 = true
      this.$set(row, 'visible2', true)
    },
    init(searchObj) {
      console.log(searchObj)
      if (searchObj == '' || !searchObj) {
        searchObj = ''
      }
      // searchObj= this.searchFrom
      // searchObj.imagePurpose = 1
      this.loading = true
      this.$api
        .gitOrderList({
          page: this.pageBid.start,
          limit: this.pageBid.limit,
          searchObj: this.searchFrom
        })
        .then(res => {
          res.data.data.forEach(item => {
            switch (item.orderStatus) {
              case 1:
                item.orderStaName = '待确定'
                break
              case 2:
                item.orderStaName = '待付款'
                break
              case 3:
                item.orderStaName = '进行中'
                break
              case 4:
                item.orderStaName = '已完成'
                break
              default:
                break
            }
            item.busSonOrderList.forEach(ele => {
              switch (ele.orderType) {
                case 1:
                  item.dingjinNum = ele.orderNum
                  break
                case 2:
                  item.weikuanNum = ele.orderNum
                  break
                case 3:
                  item.quankuanNum = ele.orderNum
                  item.moeny = ele.moeny
                  item.isPay = ele.isPay
                  break
                default:
                  break
              }
            })
          })
          this.loading = false
          this.tableData = res.data.data
          this.pageBid.totalCount = res.data.count
        })
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row)
        })
      } else {
        this.$refs.multipleTable.clearSelection()
      }
    },
    //多选删除
    handSeleDel() {},
    onConfirm() {
      if (this.ids != '') {
        this.$api.getShopBannerDel({ id: this.ids }).then(res => {
          if (res.data.code == 200) {
            this.$message({
              message: res.data.message,
              type: 'success'
            })
            this.init()
          }
        })
      } else {
        this.$message('请至少选择一条')
      }
    },
    onCancel() {},
    handleSelectionChange(val) {
      this.multipleSelection = []
      val.forEach(item => {
        this.multipleSelection.push(item.id)
      })
      this.ids = this.multipleSelection.join(',')
    },
    handBidleSizeChange(val) {
      this.pageBid.limit = val
      this.init()
    },
    handBidleCurrentChange(val) {
      this.pageBid.start = val
      this.init()
    }
  }
}
</script>

<style lang="scss" scoped>
.banner_img {
  width: 200px;
  height: 54px;
}
.shop_btns .el-button {
  color: #38ad93 !important;
}
.sige_box {
  display: flex;
  align-items: center;

  .sige {
    width: 8px;
    height: 8px;
    min-width: 8px;
    min-height: 8px;
    border-radius: 50%;
    // background: rgba(82, 196, 26, 1);
    display: block;
    margin-right: 7px;
  }
}

.table-main {
  background-color: #fff;

  .hand-btns {
    height: 40px;
    border: 1px solid rgba(56, 173, 147, 0.17);
    line-height: 40px;
    border: 5px;
    background-color: #ebf6f4;
    padding: 0 16px;
    .btns-title {
      color: #000000;
      font-size: 14px;
      margin: 0 14px;
    }
    .btns-clos {
      color: #4eb69f;
      font-size: 14px;
    }
  }
  .hadn-new {
    margin-bottom: 24px;
  }
  .search-btns {
    display: flex;
    align-content: center;
    //
    .search-btn {
      width: 65px;
      height: 32px;
      background: rgba(56, 173, 147, 1);
      border-radius: 4px;
      color: #fff;
      font-size: 14px;
      line-height: 32px;
      text-align: center;
      margin-right: 8px;
    }
    .search-reset {
      background-color: #fff;
      color: #000;
      border: 1px solid rgba(217, 217, 217, 1);
    }
  }
  .tab-search {
    display: flex;
    align-content: center;
    margin-bottom: 28px;
    .search-cont:first-child {
      margin-right: 85px;
    }
    .search-cont {
      display: flex;
      align-content: center;
      line-height: 32px;
      .search-name {
        font-size: 14px;
        color: #000;
        margin-right: 12px;
      }
    }
  }
}
</style>
